<template>
  <div class="p-6 flex border-gray-300 gap-3 flex-wrap">
    <AButton @click="openDrawer1" type="primary">挂载到body上的抽屉</AButton>
    <AButton @click="openDrawer2" type="primary">挂载到内容区域抽屉</AButton>

    <div class="drawer-content">
      我是内容区域
    </div>

    <Drawer1 @register="register1"></Drawer1>
    <Drawer2 @register="register2"></Drawer2>
  </div>
</template>

<script lang="ts" setup>
import { useDrawerOut } from '@zm-pkg/ui'
import { default as Drawer1 } from './components/Drawer1.vue'
import { default as Drawer2 } from './components/Drawer2.vue'

const [register1, { openDrawer: openDrawer1 }] = useDrawerOut()
const [register2, { openDrawer: openDrawer2 }] = useDrawerOut()

</script>

<style lang="less" scoped>
.drawer-content{
  width: 100%;
  height: 250px;
  border: 1px solid #e7e7e7;
  position: relative;
  overflow: hidden;
}
</style>